<template>
 <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>题目管理</el-breadcrumb-item>
  <el-breadcrumb-item>题目列表</el-breadcrumb-item>
  
</el-breadcrumb>

<!--添加卡片-->
<el-card >
<!--搜索与添加-->
<div style="margin-top: 15px;">

  

  <el-row :gutter="30">
  <el-col :span="8">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      
      <el-option v-for="item in selectlist" :key="item.searchname" :label='item.searchname' :value="item.id"></el-option>
      
    </el-select>
    <el-button slot="append" icon="el-icon-search" @click="SearchExamList"></el-button>
  </el-input>
  
  </el-col>
  <el-col :span="4">
  <el-button type="primary" @click="OpenAddDialog">添加题目</el-button>
  </el-col>
  
</el-row>
<!--表格开始-->
<el-table
        :data="examlist"
        border
        
        style="width: 100%"
      >
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="title" label="题目" width="180">
        </el-table-column>
        <el-table-column prop="subjectname" label="课程" width="180">
        </el-table-column>
        
        </el-table-column>
        <el-table-column prop="type" label="题型" width="180">
        <template slot-scope="scope">
        <el-button  size="small"  type="primary" v-if="scope.row.type == 0">
        单选
        </el-button>
        <el-button  size="small"  type="info" v-if="scope.row.type == 1">
        简答
        </el-button>
        


        </template>

        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="180">
        <!-- 插槽 评分系统-->
   
         <template slot-scope="scope">
              <el-rate
  v-model="scope.row.difficulty"
  disabled
  show-score
  text-color="#ff9900"
  >
</el-rate>
         
         </template>
        </el-table-column>
        <el-table-column label="操作" width="190">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="showEditDialog(scope.row.id)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="DeleteExamListById(scope.row.id)"
              ></el-button>
            </el-tooltip>
            
          </template>
        </el-table-column>
      </el-table>
      <!--分页功能-->
      <el-pagination

  @current-change="handleCurrentChange"
  
  :page-size="4"
  :pager-count="11"
  layout="prev, pager, next"
  :total="total">
</el-pagination>
</div>
    
</el-card>
<!-- 这里写添加功能-->
 <el-dialog
      title="题目信息添加"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
    <el-form
        :model="addForm"
        :rules="rules"
        ref="addFormRef"
        label-width="70px"
    >
    <!--题目-->
    <el-form-item label="题目" prop="title">
          <el-input v-model="addForm.title"></el-input>
    </el-form-item>
    <!--题目类型-->
    <el-form-item label="题目类型" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择题目类型">
            <el-option label="单选" value="0"></el-option>
            
            <el-option label="简答" value="1"></el-option>
          </el-select>
    </el-form-item>
    <!--所属课程-->
    <el-form-item label="所属课程" prop="type">
          <el-select v-model="addForm.subjectid" placeholder="请选择题目类型">
           <!-- 这里是个列表去取值-->
           <el-option v-for="item in addFormSubjectList"  :key="item.id" :label="item.name" :value="item.id"></el-option>
          
          </el-select>
    </el-form-item>
    <!--选项区域 需要判断题目类型是否为单选-->
    <el-form-item v-if="addForm.type==0"  label="选项A" prop="title">
          <el-input v-model="addForm.optiona"></el-input>
    </el-form-item>
    <el-form-item v-if="addForm.type==0" label="选项B" prop="title">
          <el-input v-model="addForm.optionb"></el-input>
    </el-form-item>
    <el-form-item v-if="addForm.type==0" label="选项C" prop="title">
          <el-input v-model="addForm.optionc"></el-input>
    </el-form-item>
    <el-form-item v-if="addForm.type==0" label="选项D" prop="title">
          <el-input v-model="addForm.optiond"></el-input>
    </el-form-item>
    <!--答案区域-->
    <el-form-item  v-if="addForm.type==1 ||addForm.type==0 "label="答案" prop="title">
          <!--根据题目类型限制答案格式-->

          <!--简答答案-->
          <el-input v-if="addForm.type==1" v-model="addForm.answer"></el-input>
          <!--单选答案-->
          <el-select v-if="addForm.type==0" v-model="addForm.answer" placeholder="请选择题目类型">
            <el-option label="A" value="A"></el-option>
            <el-option label="B" value="B"></el-option>
            <el-option label="C" value="C"></el-option>
            <el-option label="D" value="D"></el-option>
          </el-select>
          

    </el-form-item>

    <el-form-item  type="textarea" label="题目解析" prop="title">
          <el-input v-model="addForm.parse"></el-input>
    </el-form-item>
    <!--题目难度-->

    <el-form-item label="难度" prop="title">
       <el-rate v-model="addForm.difficulty"></el-rate>
  </el-form-item>
  
   

    </el-form>
    <!--底部区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="InsertExam">确 定</el-button>
      </span>

    </el-dialog>
    <!--这里写修改功能-->
    <el-dialog
      title="题目信息修改"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
    <el-form
        :model="editForm"
        :rules="rules"
        ref="editFormRef"
        label-width="70px"
    >
    <!--题目-->
    <el-form-item label="题目" prop="title">
          <el-input v-model="editForm.title"></el-input>
    </el-form-item>
    <!--题目类型-->
    
    <!--所属课程-->
    <el-form-item label="所属课程" prop="type">
          <el-select v-model="editForm.subjectid" placeholder="请选择题目类型">
           <!-- 这里是个列表去取值-->
           <el-option v-for="item in addFormSubjectList"  :key="item.id" :label="item.name" :value="item.id"></el-option>
          
          </el-select>
    </el-form-item>
    <!--选项区域 需要判断题目类型是否为单选-->
    <el-form-item v-if="editForm.type==0"  label="选项A" prop="title">
          <el-input v-model="editForm.optiona"></el-input>
    </el-form-item>
    <el-form-item v-if="editForm.type==0" label="选项B" prop="title">
          <el-input v-model="editForm.optionb"></el-input>
    </el-form-item>
    <el-form-item v-if="editForm.type==0" label="选项C" prop="title">
          <el-input v-model="editForm.optionc"></el-input>
    </el-form-item>
    <el-form-item v-if="editForm.type==0" label="选项D" prop="title">
          <el-input v-model="editForm.optiond"></el-input>
    </el-form-item>
    <!--答案区域-->
    <el-form-item  v-if="editForm.type==1 ||editForm.type==0 "label="答案" prop="title">
          <!--根据题目类型限制答案格式-->

          <!--简答答案-->
          <el-input v-if="editForm.type==1" v-model="editForm.answer"></el-input>
          <!--单选答案-->
          <el-select v-if="editForm.type==0" v-model="editForm.answer" placeholder="请选择题目类型">
            <el-option label="A" value="A"></el-option>
            <el-option label="B" value="B"></el-option>
            <el-option label="C" value="C"></el-option>
            <el-option label="D" value="D"></el-option>
          </el-select>
          

    </el-form-item>

    <el-form-item  type="textarea" label="题目解析" prop="title">
          <el-input v-model="editForm.parse"></el-input>
    </el-form-item>
    <!--题目难度-->

    <el-form-item label="难度" prop="title">
       <el-rate v-model="editForm.difficulty"></el-rate>
  </el-form-item>
   <!--分数-->
   <el-form-item label="分数" prop="title">
   <el-input v-model="editForm.scorce" disabled></el-input>
   </el-form-item>
   

    </el-form>
    <!--底部区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="InsertExamList">确 定</el-button>
      </span>

    </el-dialog>
    


 </div>



</template>

<script>
//对外暴露接口
 export default {
name:'examlist', 
   data () {
     return {
         //搜索类型
         select:"搜索类型",
         //搜索框内容
         input3:" ",
         selectlist:[],
         //表格数据
         examlist:[],
         //添加对话框控制
         addDialogVisible:false,
         //添加对话框用表单
         addForm:{},
         //添加对话框表单的学科信息
         addFormSubjectList:[],
         rules:{
            title: [
            { required: true, message: '请填写此字段', trigger: 'blur' },
          ],

         },
         //分页一共多少数据
         total:1000,
         //修改功能对话框的显示
         editDialogVisible:false,
         //修改对话框用表单
         editForm:{},

        

         

     }
   },
   created() {


   },
   mounted() {
       this.GetExamListSearchConfig()
       this.GetExamList()
       this.GetExamListByPage(1,4);
       this.GetSubjectList()
   },
   methods: {
      GetExamListSearchConfig(){
             let that = this;
      let url = "GetConfig/GetExamListSearchConfig";
      let token = window.sessionStorage.getItem("token");
      let data = {
        token: token,
        
      };
      this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
          that.selectlist = Response.data.data
        } else {
          that.$message.error(message);
        }
      });

    
       },
       GetExamList(){
            let that = this;
      let url = "api/GetExamList";
      let token = window.sessionStorage.getItem("token");
      let data = {
        token: token,
        
      };
      this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        if ((code = 200)) {
          that.examlist = Response.data.data
          that.total = Response.data.data.length
        } else {
          that.$message.error(message);
        }
      });

       },
    //添加用户对话框
    OpenAddDialog() {
      this.addDialogVisible = true;
      //打开之前应该获取学科信息
    },
    //添加用户对话框关闭
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    //向数据库发送信息进行更新
    
    InsertExam(){
      
      let addForm = this.addForm
      console.log(addForm)
       let that = this;
      let url = "/api/AddExamList";
      let token = window.sessionStorage.getItem("token");
      let scorce = 0;
      if(this.addForm.type == 0){
        scorce =5;
      }
      else{
        scorce = 10;
      }
      let data = {
      answer:this.addForm.answer,
			difficulty:this.addForm.difficulty,
			optiona:this.addForm.optiona,
			optionb:this.addForm.optionb,
			optionc:this.addForm.optionc,
			optiond:this.addForm.optiond,
			parse:this.addForm.parse,
			scorce:scorce,
			subjectid:this.addForm.subjectid,
			title:this.addForm.title,
			type:this.addForm.type,
        
      };
      this.$axios.post(url,
                      this.$qs.stringify(data), 
                      ).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        if ((code = 200)) {
          that.addDialogClosed();
          that.addDialogVisible = !that.addDialogVisible
          that.GetExamList();
          
        } else {
          that.$message.error(message);
        }
      });



    },
    //获取学科信息
    GetSubjectList(){
      let that = this;
      let url = "api/GetSubject";
      let token = window.sessionStorage.getItem("token");
      let data = {
        token: token,
        
      };
      this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        if ((code = 200)) {
          
          let list = Response.data.data
          that.addFormSubjectList = list
          
        } else {
          that.$message.error(message);
        }
      });

    },
    //按条件搜索
    SearchExamList(){
      //获取搜索类型的id
      //console.log(this.select)
      //获取文本框内容
      //console.log(this.input3)
      if(this.select == 1){
        console.log("按课程")
        //判断是否为
        this.SearchExamListBySubjectName(this.input3)
      }
      else if(this.select == 2){
        console.log("按题目")
        this.SearchExamListByExamListTitle(this.input3)
      }
      else{
        this.$message.error("请选择类型")
        //清空
        this.input3 = ""
      }

    },
    SearchExamListByExamListTitle(input){
       let that = this;
      let url = "api/SearchExamListByExamListTitle";
      let token = window.sessionStorage.getItem("token");
      let data = {
        ExamListTitle: input,
        
      };
      this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        that.total = Response.data.data.length
        if ((code = 200)) {
          that.examlist = Response.data.data
        } else {
          that.$message.error(message);
        }
      });

      

    },
    SearchExamListBySubjectName(input){
       let that = this;
      let url = "api/SearchExamlistBySubjectName";
      let token = window.sessionStorage.getItem("token");
      let data = {
        subjectname: input,
        
      };
      this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        if ((code = 200)) {
          that.examlist = Response.data.data
          that.total = Response.data.data.length
        } else {
          that.$message.error(message);
        }
      });

      

    },
    
      handleCurrentChange(val) {
        
       this. GetExamListByPage(val,4)

      },
      GetExamListByPage(pagenum,count){
     
        let url = "api/SearchExamListByPage";
        let that = this
        let data = {
          pagenum :pagenum,
          count :count,
        }
        this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        if ((code = 200)) {
          
          let list = Response.data.data
          that.examlist = list
          
        } else {
          that.$message.error(message);
        }
      });


      },
      //修改用户对话框点击的触发函数
      showEditDialog(id){
        console.log(id)
        
        //像后端发送获取数据请求
        let url = "api/GetExamListById";
        let that = this
        let data = {
          id:id
        }
        this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        if ((code = 200)) {
          
          let list = Response.data.data
          that.editForm = list
          console.log(that.editForm)
          that.editDialogVisible = true

          
        } else {
          that.$message.error(message);
        }
      });
     
      



      },
       //修改用户对话框提交表单用函数
      InsertExamList(){
        console.log(this.editForm)
        let url = "api/UpdateExamListById";
        let that = this
        let data = {
      id:this.editForm.id,
      answer:this.editForm.answer,
			difficulty:this.editForm.difficulty,
			optiona:this.editForm.optiona,
			optionb:this.editForm.optionb,
			optionc:this.editForm.optionc,
			optiond:this.editForm.optiond,
			parse:this.editForm.parse,
			scorce:this.editForm.scorce,
			subjectid:this.editForm.subjectid,
			title:this.editForm.title,
			type:this.editForm.type,

        }
        this.$axios.post(url,
                      this.$qs.stringify(data), 
                      ).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        if ((code = 200)) {
          that.editDialogClosed();
          that.editDialogVisible = !that.editDialogVisible
          that.GetExamListByPage(1,4)
          
        } else {
          that.$message.error(message);
        }
      });
      },

      editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    //这是删除功能的函数
    DeleteExamListById(id){
      console.log("点击了删除按钮"+id)
      let url = "api/DeleteExamListByid";
      let data={
        id : id
      }
      let that = this
      this.$axios.post(url,
                      this.$qs.stringify(data), 
                      ).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        if ((code = 200)) {
         
          that.GetExamListByPage(1,4)
          
        } else {
          that.$message.error(message);
        }
      });

    }


           
       
   },
   
   components: {

   }
 }
</script>

<style scoped>
 .el-select{
    width: 130px;
  }
 .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
 
</style>
